import {
  ComponentConfigType,
  componentConfigGroup,
} from '../../../../../components/QuestionComponents';
import { Typography } from 'antd';
import { useDispatch } from 'react-redux';
import { addComponent } from '../../../../../store/componentReducer';
import styles from './index.module.scss';
import { nanoid } from '@reduxjs/toolkit';
import { FC, useCallback } from 'react';
const { Title } = Typography;
const GenComponent: FC<ComponentConfigType> = (componentInfo: ComponentConfigType) => {
  const { title, type, Component, defaultProps } = componentInfo;
  const dispatch = useDispatch();
  //添加组件
  const handleClick = useCallback(() => {
    const newComponent = {
      fe_id: nanoid(),
      title,
      type,
      isHidden: false,
      isLocked: false,
      props: defaultProps,
    };
    dispatch(addComponent(newComponent));
  }, []);
  return (
    <div key={type} className={styles.wrapper} onClick={handleClick}>
      <div className={styles.component}>
        <Component />
      </div>
    </div>
  );
};

const ComponentLib: FC = () => {
  return (
    <>
      {componentConfigGroup.map((item, index) => {
        const { groupId, groupName, components } = item;

        return (
          <div key={groupId}>
            <Title level={3} style={{ fontSize: '16px', marginTop: index > 0 ? '20px' : '0' }}>
              {groupName}
            </Title>
            {components.map((component) => {
              return GenComponent(component);
            })}
          </div>
        );
      })}
    </>
  );
};
export default ComponentLib;
